<script setup>
import { ref } from 'vue'

const objectives = ref([
  '构建智能化的协同图像管理平台',
  '实现多模态图像检索与智能标注',
  '提供团队协作与版本控制功能',
  '支持跨平台访问与数据安全存储'
])

const features = ref([{
  title: '智能图库管理',
  desc: '支持批量上传/下载，自动分类管理'
},
  {
    title: '协同编辑',
    desc: '实时多人协作，版本历史追溯'
  },
  {
    title: 'AI标注',
    desc: '自动图像识别与智能标签生成'
  },
  {
    title: '权限管理',
    desc: '细粒度团队权限控制系统'
  }])
</script>

<template>
  <section class="introduction">
    <h2>项目简介</h2>

    <div class="section">
      <h3>🎯 项目目标</h3>
      <ul class="list">
        <li v-for="(item, index) in objectives" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>

    <div class="section">
      <h3>⚙️ 核心功能</h3>
      <div class="grid">
        <div v-for="(feature, index) in features" :key="index" class="card">
          <h4>{{ feature.title }}</h4>
          <p>{{ feature.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.introduction {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

.section {
  margin: 2rem 0;
}

h3 {
  color: #34495e;
  margin-bottom: 1rem;
}

.list {
  padding-left: 1.5rem;
  line-height: 2;
}

.list li {
  color: #555;
  padding: 0.25rem 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #3498db;
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-3px);
}

.card h4 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.card p {
  color: #7f8c8d;
  line-height: 1.6;
}
</style>
